<template>
  <div class="mian">
    <div class="singer_tag">
      <div>
        <a href="#" class="btn_tag">热门</a>
        <a href="#">A</a>
        <a href="#">B</a>
        <a href="#">C</a>
        <a href="#">D</a>
      </div>
      <div>
        <a href="#" class="btn_tag">全部</a>
        <a href="#">内地</a>
        <a href="#">港台</a>
        <a href="#">欧美</a>
        <a href="#">日本</a>
        <a href="#">韩国</a>
      </div>
      <div>
        <a href="#" class="btn_tag">全部</a>
        <a href="#">男女</a>
        <a href="#">组合</a>
      </div>
      <div>
        <a href="#" class="btn_tag">全部</a>
        <a href="#">流行</a>
        <a href="#">说唱</a>
        <a href="#">国风</a>
        <a href="#">摇滚</a>
        <a href="#">电子</a>
      </div>
    </div>
    <div class="singer_content">
      <div
        class="singer-name"
        v-for="Singer in Singerlists"
        :key="Singer.singerID"
      >
        <!-- <img src="../../assets/images/Singer/zjl.jpg" alt="" /> -->
        <img :src="getimg(Singer.artistpicture)" />
        <p>{{ Singer.name }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //数组接收res
      Singerlists: [],
      getimg(src) {
        return require("../../assets/images/Singer/" + src);
      },
    };
  },
  //页面加载后自动调用
  mounted() {
    this.GetSingers();
  },
  methods: {
    //获取歌单列表
    GetSingers: function () {
      var thisvue = this;
      this.$http
        .get("http://localhost:31551/api/Singer/GetSingers/")
        .then(function (res) {
          thisvue.Singerlists = res.data;
        });
    },
  },
};
</script>

<style scope>
/*分类*/
.singer_tag {
  margin: auto;
  width: 1050px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.btn_tag {
  margin-right: 20px;
  background-color: #ff0000;
}
.singer_tag div {
  margin: auto;
}
.singer_tag div a {
  line-height: 30px;
  text-align: center;
  color: #b5b5b5;
  display: inline-block;
  height: 30px;
  width: 40px;
  margin: 5px;
}
.singer_tag div a:hover {
  color: #ffffff;
}
/*歌手名称*/
.singer_content {
  margin: auto;
  width: 1200px;
  height: auto;
}
.singer-name {
  float: left;
  text-align: center;
  margin: 50px 0 0 80px;
}
.singer-name img {
  width: 144px;
  height: 144px;
  border-radius: 50%;
}
</style>